<template>
  <view class="box">
    <Search />
    <view class="cate">
      <scroll-view scroll-y class="scroll_left">
        <view
          class="scroll_left_item"
          :class="{
            active: activeIndex === index,
          }"
          @tap="changeTabs(index)"
          v-for="(item, index) in cate_left"
          :key="item.cat_id"
        >
          {{ item.cat_name }}
        </view>
      </scroll-view>
      <scroll-view scroll-y class="scroll_right">
        <view
          class="scroll_right_item"
          v-for="item in cate_right"
          :key="item.cat_id"
        >
          <view class="item_title">{{ item.cat_name }}</view>
          <view class="item_floor">
            <navigator
              :url="`/pages/goods_list/main?cid=${item2.cat_id}`"
              hover-class="none"
              class="item_in"
              v-for="item2 in item.children"
              :key="item2.cat_id"
            >
              <image
                class="item_in_image"
                :src="item2.cat_icon"
                mode="aspectFill"
              />
              <view class="item_in_text">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/search";
import { getCategories } from "../../api/index";
export default {
  components: { Search },
  data() {
    return {
      activeIndex: 0,
      cateAll: [],
      cate_left: [],
      cate_right: [],
    };
  },
  onLoad() {
    const cateAll = uni.getStorageSync("cateAll") || [];
    if (cateAll.length === 0) {
      this.getCateData();
    } else {
      const now = Date.now();
      const old = uni.getStorageSync("cateAllTime");
      const time = 7200 * 1000;
      if (now - old > time) {
        this.getCateData();
      } else {
        this.upCate(cateAll);
      }
    }
  },
  methods: {
    getCateData() {
      getCategories().then((res) => {
        console.log(res);
        const cateAll = res.data.message;
        this.upCate(cateAll);
        uni.setStorageSync("cateAll", res.data.message);
        uni.setStorageSync("cateAllTime", Date.now());
      });
    },
    upCate(cateAll) {
      this.cateAll = cateAll;
      this.cate_left = cateAll.map(({ cat_name, cat_id }) => ({
        cat_name,
        cat_id,
      }));
      this.cate_right = this.cateAll[0].children;
    },
    changeTabs(index) {
      console.log(index);
      this.activeIndex = index;
      this.cate_right = this.cateAll[index].children;
    },
  },
};
</script>
<style lang="less" scoped>
.cate {
  display: flex;
  height: calc(100vh - 100rpx);
  .scroll_left {
    width: 182rpx;
    font-size: 26rpx;
    background-color: #f3f3f3;
    .scroll_left_item {
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &.active {
        color: #eb4450;
        &::before {
          content: "";
          width: 4rpx;
          height: 43rpx;
          background-color: #eb4450;
          position: absolute;
          left: 0;
        }
      }
    }
  }
  .scroll_right {
    .scroll_right_item {
      // background-color: skyblue;
      .item_title {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        &::before,
        &::after {
          content: "/";
          color: #ccc;
          margin: 0 10rpx;
        }
      }
      .item_floor {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .item_in {
          padding: 20rpx 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 33.33%;
          .item_in_image {
            width: 120rpx;
            height: 120rpx;
          }
          .item_in_text {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>